<template>
  <view>
    <view
      class="richTextCard"
      :class="{
        richTextCardOther: data.from === KKConversationFrom.other,
      }"
    >
      <scroll-view
        v-if="isKatexStr(data.text || '')"
        style="width: calc(100%); padding-bottom: 12rpx"
        id="scrollview"
        scroll-x="true"
      >
        <kkKatex
          class="richTextCard-text textWrap"
          :class="{
            'richTextCard-textOther': data.from === KKConversationFrom.other,
          }"
          from="chat"
          :data="richText"
        ></kkKatex>
      </scroll-view>
      <!-- AI回复 -->
      <view
        v-if="!isKatexStr(data.text || '') && data.answerWay === 3"
        class="richTextCard-text markdownFormate"
        :class="{
          'richTextCard-textOther': data.from === KKConversationFrom.other,
          'richTextCard-isSelectMode': isSelectMode,
        }"
        @touchstart="touchstart"
        @touchend="touchend"
      >
        <ua-markdown :source="richText" />
      </view>
      <up-parse
        v-if="!isKatexStr(data.text || '') && data.answerWay !== 3"
        ref="richTextRef"
        class="richTextCard-text textWrap"
        :class="{
          'richTextCard-textOther': data.from === KKConversationFrom.other,
        }"
        :content="richText"
      ></up-parse>
    </view>
    <ConversationStatus
      class="conversationStatus"
      v-if="data.from === KKConversationFrom.me"
      :data="data"
    />
  </view>
</template>

<script setup lang="ts">
import { getFileUrl } from "@/utils/util";
import { isKatexStr } from "@/pagesA/utils/util";

import { KKConversationFrom } from "./conversitonEnum";
import ConversationStatus from "@/pagesA/answer/components/conversationStatus.vue";
import kkKatex from "@/pagesA/components/kkKatex/index.vue";
import UaMarkdown from "@/pagesA/components/ua-markdown/ua-markdown.vue";

import { onMounted, computed } from "vue";

import {} from "vue";
const props = defineProps({
  data: {
    type: Object,
    default: {},
  },
  isSelectMode: {
    type: Boolean,
    default: false,
  },
});

const richText = computed(() => {
  let text = props.data.text;
  const newHtml = getImgSrcAndReplace(text, (src: any) => {
    // 这里可以添加你的替换逻辑，例如添加图片尺寸参数
    return getFileUrl(src);
  });
  return newHtml;
});

const getImgSrcAndReplace = (html: any, replacement: any) => {
  const imgRegex = /<img[^>]*src=['"]([^'"]+)[^>]*>/g;
  let match;
  while ((match = imgRegex.exec(html))) {
    const src = match[1];
    html = html.replace(src, replacement(src));
  }
  return html;
};

const touchstart = () => {
  console.log("richTextCard touchstart");
  emit("converstationTouchStart");
};

const touchend = () => {
  console.log("richTextCard touchend");
  emit("converstationTouchEnd");
};

onMounted(() => {});

const emit = defineEmits(["converstationTouchStart", "converstationTouchEnd"]);
</script>

<style lang="scss" scoped>
.richTextCard {
  border-radius: 38rpx 8rpx 38rpx 38rpx;
  background: linear-gradient(89deg, #3d8eff 0%, #7835ff 100%);

  padding-bottom: 24rpx;
  padding-left: 24rpx;
  padding-top: 18rpx;
  padding-right: 24rpx;
  &-text {
    font-size: 32rpx;
    color: #ffffff;
    line-height: 48rpx;
  }
  &-textOther {
    font-size: 32rpx;
    color: #111111;
    line-height: 48rpx;
  }
  &-isSelectMode {
    width: calc(430rpx - 48rpx);
  }
  .markdownFormate {
    width: calc(478rpx - 48rpx);
  }
}
.richTextCardOther {
  border-radius: 8rpx 38rpx 38rpx 38rpx;
  background: #fff;
}
.conversationStatus {
  margin-top: 24rpx;
}
</style>
